<div class="row">
	<div class="col-xs-12">
		<div class="box">
			<div class="box-header">
				<h3 class="box-title">用户管理</h3>

				<div class="box-tools">
					<div class="input-group input-group-sm" style="width: 350px;">
						<input type="text" name="table_search" id="searchNameId"
							class="form-control pull-right" placeholder="用户名">

						<div class="input-group-btn">
							<button type="button" class="btn btn-default btn-search">
                                <i class="fa fa-search"></i>
							</button>
							<button type="button" class="btn btn-default btn-add">添加</button>
							<button type="button" class="btn btn-default btn-update">修改</button>
						</div>
					</div>
				</div>
			</div>
			<!-- /.box-header -->
			<div class="box-body table-responsive no-padding">
				<table class="table table-hover">
					<thead>
						<tr>
							<th>ID</th>
							<th>用户名</th>
							<th>部门</th>
							<th>邮箱</th>
							<th>手机号</th>
							<th>状态</th>
							<th>创建时间</th>
							<th>修改时间</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody id="tbodyId"></tbody>
				</table>
			</div>
			<div id="pageId" class="box-footer clearfix">
			</div>
			<!-- /.box-body -->
		</div>
		<!-- /.box -->
	</div>
</div>
<script type="text/javascript">
   $(document).ready(function(){
	   $("#pageId").load("/modules/common/page.html",doGetObjects);
	   $(".input-group-btn")
	   .on("click",".btn-search",doQueryObjects)
	   .on("click",".btn-add,.btn-update",doLoadEditUI);
	   $("tbody").on("click",".btn-valid",doValidById);
   });
   
   function doLoadEditUI(){
   	   debugger
	   //1.判定点击的对象
	   let editUrl="/modules/sys/user_edit.html"
	   if($(this).hasClass("btn-add")){
		   $("#mainContentId").load(editUrl,()=> $(".box-title").html("添加用户"))
	   }else if($(this).hasClass("btn-update")){
		   let id=doGetCheckedId();
		   if(!id){
			  alert("请先选择");
			  return;
		   }
		   //基于id进行查询并加载编辑页面
		   //2.url
		   let findByIdUrl=`${baseUrl}/user/${id}`;
		   //3.ajax request
		   $.ajax({url:findByIdUrl,crossDomain:true,xhrFields:{withCredentials: true},success(result){//JsonResult
			   if(result.state==1){
				   $("#mainContentId").data("rowData",result.data);
				   $("#mainContentId").load(editUrl,()=> $(".box-title").html("修改用户"))
			   }else{
				   alert(result.message);
			   }
		   }});
	   }
   }
   
   function doGetCheckedId(){
	 return $("tbody input[name='radioId']:checked").val();
   }
   function doLoadPage(title){

	   $("#mainContentId").load(url,function(){
		   $(".box-title").html(title);
	   }) 
   }
   //禁用和启用操作
   function doValidById(){
	   //params
	   let rowData=$(this).parents("tr").data("rowData");
	   let id=rowData.id;
	   let newValid=rowData.valid?0:1;
	   //url
	   let url=`${baseUrl}/user/${id}/${newValid}`;
	   console.log("url",url)
	   //ajax request
       let btn=$(this);//获取点击的button对象
	   console.log("token",window.localStorage.getItem("accessToken"));
	   $.ajax({
		   method:"patch",
		   url:url,
		   headers: {"Authorization":"Bearer "+window.localStorage.getItem("accessToken")},
		   crossDomain: true,
		   xhrFields:{withCredentials:true},

		   success(result){

			   if(result.state==1){
				   alert(result.message);
				   doEditRow(btn,rowData.valid);
			   }else{
				   alert(result.message);
			   }
		   }
	   });
   }    
   function doEditRow(obj,valid){
	   //1.修改按钮上的内容
	   $(obj).html(valid?"启用":"禁用");
	   //2.修改tr中第5个td中的内容(查询API文档)
	   let tr=$(obj).parents("tr");
	   tr.find("td:eq(5)").text(valid?"禁用":"启用");
	   //3.获取当前行tr对象，然后重新绑定新的值
	   let rowData=tr.data("rowData")
	   rowData.valid=valid?0:1;
	   tr.data("rowData",rowData);
   }
   //处理查询按钮事件
   function doQueryObjects(){
	   $("#pageId").data("pageCurrent",1);
	   doGetObjects();
   }
   //页面加载完成异步加载当前页数据
   function doGetObjects(){
	   let url=`${baseUrl}/user/`;
	   let pageCurrent=$("#pageId").data("pageCurrent");
	   if(!pageCurrent)pageCurrent=1;
	   let params={"pageCurrent":pageCurrent}
	   params.username=$("#searchNameId").val().trim();
	   $.ajax({url:url,data:params,crossDomain:true,xhrFields:{withCredentials: true},success(result){
		   console.log(result);
		   doHandleQueryResponseResult(result);
	   }});
   }
   function doHandleQueryResponseResult(result){
	   if(result.state==1){
		  doSetTableBodyRows(result.data.list);
		  doSetPagination(result.data);
		}else{
		  alert(result.message);
	   }
   }
   //通过服务端返回的数据初始化页面
   function doSetTableBodyRows(data){
	  //1.获取tbody对象，并清空内容
	  let tBody=$("#tbodyId");
	  tBody.empty();
	  //2.迭代data内容将数据追加到tbody中
	  data.forEach(item=>{
		  let tr=$("<tr></tr>");
		  tr.data("rowData",item);
		  let tds=doCreateTds(item);
		  tr.append(tds);
		  tBody.append(tr);
	  });
   }
   function doCreateTds(row){
	   return  `<td><input type='radio' name='radioId' value='${row.id}' ></td>
	     <td>${row.username}</td>
	     <td>${row.deptName?row.deptName:'未分配'}</td>
	     <td>${row.email}</td>
	     <td>${row.mobile}</td>
	     <td>${row.valid?"启用":"禁用"}</td>
	     <td>${row.createdTime}</td>
	     <td>${row.modifiedTime}</td>
	     <td><button type='button' class='btn btn-default btn-valid'>${row.valid?"禁用":"启用"}</button></td>`;
   }
</script>




